<template>
    <el-affix @change="changeScroll" :offset="0">
        <div class="header px-8 py-4 flex flex-row justify-between items-center" :class="{'header_bg':isFixed}">
            <div class="logo flex-1 cursor-pointer" @click="navigateTo('/')">
                <client-only>
                    <template v-if="showLogo">
                        <img v-if="appstore.theme === 'light'" src="~/assets/img/images/logo_light.png" alt="">
                        <img v-else src="~/assets/img/images/logo_dark.png" alt="">
                    </template>
                    <template #fallback>
                        <img src="~/assets/img/images/logo_light.png" alt="">
                    </template>
                </client-only>
            </div>
            <div class="flex flex-row items-center flex-nowrap">
                <ul class="flex flex-row text-sm flex-nowrap">
                    <li class="px-4 cursor-pointer">
                        <el-button @click="navigateTo('/')" link class="text-white/[0.8] hover:text-white/[0.6]">首页</el-button>
                    </li>
                    <li class="px-4">
                        <el-button link class="text-white/[0.8] hover:text-white/[0.6]" @click="navigateTo('/json')">格式化</el-button>
                    </li>
                    <li class="px-4"><el-button class="text-white/[0.8] hover:text-white/[0.6]" link @click="navigateTo('/comparison')">代码比对</el-button></li>
                    <li class="px-4"><el-button class="text-white/[0.8] hover:text-white/[0.6]" link @click="navigateTo('/regex')">正则验证</el-button></li>
                    <li class="px-4">
                        <client-only>
                            <el-dropdown @command="handleMenu">
                                <el-button link class="text-white/[0.8] hover:text-white/[0.6]" >图像处理</el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="userinfo">图片压缩</el-dropdown-item>
                                        <el-dropdown-item command="exit">图片裁切</el-dropdown-item>
                                        <el-dropdown-item command="exit">jpg转png</el-dropdown-item>
                                        <el-dropdown-item command="exit">png转jpg</el-dropdown-item>
                                        <el-dropdown-item command="exit">webp转png</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <template #fallback><el-button link class="text-white/[0.8] hover:text-white/[0.6]" >图像处理</el-button></template>
                        </client-only>
                    </li>
                    <li class="px-4">
                        <client-only>
                            <el-dropdown @command="handleMenu">
                                <el-button link class="text-white/[0.8] hover:text-white/[0.6]">常用工具</el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="userinfo">Base64加解密</el-dropdown-item>
                                        <el-dropdown-item command="exit">MD5加密</el-dropdown-item>
                                        <el-dropdown-item command="exit">jpg转png</el-dropdown-item>
                                        <el-dropdown-item command="exit">png转jpg</el-dropdown-item>
                                        <el-dropdown-item command="exit">webp转png</el-dropdown-item>
                                        <el-dropdown-item command="exit">二维码生成</el-dropdown-item>
                                        <el-dropdown-item command="exit">二维码解码</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <template #fallback><el-button link class="text-white/[0.8] hover:text-white/[0.6]" >常用工具</el-button></template>
                        </client-only>
                    </li>
                </ul>
                <client-only>
                    <template v-if="token">
                        <el-dropdown class="ml-2" @command="handleMenu">
                            <el-avatar :size="24" fit="cover" class="mr-2">user</el-avatar>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
                                    <el-dropdown-item command="exit">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                    <button v-else @click="navigateTo('/login')" class="btn text-white btn-xs px-2 py-1 text-xs btn-custom btn-sm mr-2 rounded-full">登录</button>
                </client-only>
                <div class="swap swap-rotate cursor-pointer" @click="changeTheme" v-if="false">
                    <!-- sun icon -->
                    <svg
                        v-if="appstore.theme === 'light'"
                        class="h-6 w-6 fill-current"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24">
                        <path
                        d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
                    </svg>

                    <!-- moon icon -->
                    <svg
                        class="h-6 w-6 fill-current"
                        v-else
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24">
                        <path
                        d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
                    </svg>
                </div>
                <div>
                    <client-only>
                        <el-dropdown @command="changeLanguage" class="ml-2">
                            <span>
                                <svg-icon name="language" class="text-white" width="20px" height="20px"/>
                            </span>
                            <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item :command="item.code" v-for="item in locales" :key="item.code">{{item.name}}</el-dropdown-item>
                            </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </client-only>
                    </div>
                
            </div>
        </div>
    </el-affix>
</template>
<script lang="ts" setup>
import { ElDropdown, ElButton } from 'element-plus';

const appstore = useAppStore()
const userStore= useUserStore()
const token = userStore.getToken
const isFixed = ref(false)
const { locales, locale, setLocaleCookie,setLocale } = useI18n()
const props = defineProps({
    showLogo:{
        type:Boolean,
        default:true
    },
})
function changeTheme(){
    appstore.theme = appstore.theme === 'dark' ? 'light' : 'dark'
}

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

async function handleMenu(command: any) {
    switch (command) {
        case 'exit':
        await navigateTo('/login')
        default:
            break;
    }
    console.log(command)
}


/* 切换语言 */
function changeLanguage(code:string) {
  setLocale(code)
  console.log(locales, locale, setLocaleCookie,'lalal');
}

function changeScroll(fixed: boolean) {
    if (fixed === isFixed.value) {
        return;
    }
    isFixed.value = fixed
    console.log(fixed,'changeScroll')
}

</script>
<style lang="scss" scoped>
.header{
    background-color: transparent;
    transition: all 0.3s ease;
    .logo{
        height: 36px;
        img{
            height: 100%;
            width: unset !important;
            display: block;
        }
    }
    :deep(.el-dropdown){
        line-height: unset !important;
        .el-dropdown-menu{
            background-color: red !important;
            .el-dropdown-menu__item{
                line-height: 22px;
                padding: 5px 16px;
            }
        }
    }
}
.header_bg{
    background-color: rgba($color: #000000, $alpha: 0.08);
}
</style>